<template>
    <div class="container" :style="'min-height: '+$docHeight+'px'">
        <div v-if="!showTimeOut&&showCont">
            <div class="headCont">
                <div class="userItem">
                    <div class="userImg">
                        <img :src="userObj.userImg" />
                    </div>
                    <div class="userInfo">
                        <div class="userHead">
                            <div class="userName">{{ userObj.userName }}</div>
                            <div class="orderTag">今日有号</div>
                        </div>
                        <div class="userTagDes">
                            <div class="userdesItem">{{ userObj.doctName }}</div>
                            <div class="userdesItem">{{ userObj.doctName2 }}</div>
                        </div>
                        <div class="userUnder">
                            <div class="orderPrice">挂号费：<span class="redText">¥{{ userObj.pricr }}元</span></div>
                        </div>
                    </div>
                </div>
                <div class="headDes">
                    <div :class="isOpen?'headDesItem':'headDesItem hasOpen'">擅长：{{ userObj.userDes }}</div>
                    <div :class="isOpen?'headDesItem':'headDesItem hasOpen'">简介：{{ userObj.userDes2 }}</div>
                    <div class="openBtn" @click="isOpen = !isOpen">{{ isOpen?'隐藏展示':'显示全部' }}</div>
                </div>
            </div>
            <div class="orderCont">
                <div class="orderHead">门诊预约挂号</div>
                <div class="orderAddress">健高儿科门诊 747m</div>
                <div class="delMask">
                    <div class="delTitle">请选择预约日期</div>
                    <div class="dateCheck">
                        <div :class="activeDate==item.date?'dateActive dateCheckItem':'dateCheckItem'" @click="dateFn(item,index)" :key="index" v-for="(item,index) in dateArr">
                            <div class="weekVal">{{ item.dayOfWeek }}</div>
                            <div>{{ item.date }}</div>
                        </div>
                    </div>
                    <div class="delTitle">请选择预约时间点</div>
                    <div class="timeCont">
                        <div :class="index%3==0?'noLeft timeItem':'timeItem'" :key="index" v-for="(item,index) in timeArr">
                            <div @click="timeFn(item)" :class="activeTime==item?'activeTimeMain timeItemMain':'timeItemMain'">
                                <span>{{ item }}(余2)</span>
                            </div>
                        </div>
                    </div>
                    <div class="noTime" v-if="timeArr.length==0">今日暂无可预约时间,请选择其他时间～</div>
                </div>
            </div>
            <div class="orderBtn">立即预约（¥18.00元）</div>
        </div>
    </div>
</template>
<script>
    import saveBtn from '@/components/public/saveBtn.vue'
    export default {
        components: {saveBtn},
        name:'',
        data() {
            return {
                showTimeOut:false,
                showCont:false,
                homeData:{},
                userArr:[
                    {userImg:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/2340ccc675c30b290a9edf9a7f3de26eb39b7785.png",userName:'倪鑫博士',orderStatus:true,doctName:'主治医生',doctName2:'耳鼻喉科',userDes:'耳鼻咽喉专业常见病及多发病的诊断及手术治疗以及耳鼻喉危急重症患者抢救，是耳鼻咽喉专业业务骨干。',pricr:'13.00',id:0,userDes2:'男，主治医师，科室耳鼻咽喉专业医疗组长。毕业于川北医学院眼耳鼻喉专业，从事耳鼻咽喉工作10+年，曾在川北医学院附属医院及华西医院进修学习，擅长耳鼻咽喉常见病及多发病的诊断及手术治疗，是耳鼻咽喉专业业务骨干。'},
                    {userImg:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/6f902d3507d7e762e2c92e3b220486628ffdd48e.png",userName:'刘建文',orderStatus:true,doctName:'副主任医师',doctName2:'骨科',userDes:'创伤、脊柱、关节等疾病的诊疗。',pricr:'15.00',id:1,userDes2:'女，高年资主治医师。本科毕业于成都中医药大学，从事中西医临床工作10余年。曾随四川省中医院多位名师学习，如四川省首届名中医、著名中医儿科专家胡天成教授；中医妇科朱鸿秋教授；肾病科詹华奎教授等。对中医儿科、中医妇科、消化内科、呼吸内科等常见病都有较丰富的临床经验。'},
                    {userImg:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/92281657c7df8f7d324835836bb30ce377155870.png",userName:'吴艺橙',orderStatus:true,doctName:'主治医生',doctName2:'儿童保健科',userDes:'儿科常见病、多发病、儿童保健及生长发育性疾病的诊治。',pricr:'10.00',id:2,userDes2:'男，主治医师，儿科主任；硕士研究生在读，师从四川大学杨凡教授；眉山市医学会新生儿专委会委员；眉山市医学会儿童肾脏及免疫专委会委员；近3年发表学术论文1篇，，儿童医学科普5篇。',},
                    {userImg:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/dd7b9883b5fac8f37d1d13f7faf272135cdc05f1.png",userName:'罗诗伊',orderStatus:true,doctName:'副主任医师',doctName2:'中医科',userDes:'脾胃病如慢性胃炎、消化性溃疡、慢性肠炎、胃肠神经官能症、慢性便秘等。肺系病如慢支炎、慢阻肺、肺功能受损、慢性咳嗷、慢性咽炎等。心脑病如眩晕、慢性头痛、高血压病、动脉硬化等。肝病如脂肪肝、肝功能异常等。肾病如慢性水肿、慢性腰痛、长期蛋白尿等。肿瘤病如肺癌、胃癌等。情志病如慢性失眠、焦虑状态等。妇科病如卵巢早衰、多囊卵巢综合征、月经失调、乳腺增生等。',pricr:'18.00',id:3,userDes2:'女，副主任中医师，医学硕士。本科毕业于泸州医学院，研究生毕业于成都中医药大学。2005年8月至2022年3月在仁寿县人民医院工作，任中医科主任。其专业主攻方向为中西医结合内科，旁及中医妇科、中医儿科等，从医多年，曾先后获得县级、市级科学进步二等奖。现为眉山市名中医，眉山市“十佳医生”，仁寿县名医。'},
                ],
                userObj:{},
                isOpen:false,
                timeArr:[],
                dateArr:[],
                activeDate:'',
                activeTime:'',
                delivery_time:'',
            }
        },
        props: {},
        setup(){},
        methods:{
            getTime(){
                const currentDate = new Date();

                // 存储结果的数组
                const weekDates = [];

                // 星期几的中文格式化选项
                const dayOfWeekOptions = { weekday: 'long', era: 'short' };
                // 日期的中文格式化选项
                const dateOptions = { month: 'long', day: 'numeric' };

                // 循环获取接下来一周的日期
                for (let i = 0; i < 7; i++) {
                    // 获取日期
                    let date = new Date(currentDate);
                    date.setDate(currentDate.getDate() + i);

                    // 格式化日期和星期几为中文
                    let formatterDayOfWeek = new Intl.DateTimeFormat('zh-CN', dayOfWeekOptions);
                    let formatterDate = new Intl.DateTimeFormat('zh-CN', dateOptions);

                    let formattedDayOfWeek = formatterDayOfWeek.format(date);
                    let formattedDate = formatterDate.format(date);
                    formattedDate = formattedDate.split('月')[0]+'-'+formattedDate.split('月')[1].split('日')[0]
                    if(i==0){
                        formattedDayOfWeek = '公元 今天'
                        this.activeDate = formattedDate
                    }else if(i==1){
                        formattedDayOfWeek = '公元 明天'
                    }
                    // 将日期和星期几添加到结果数组
                    weekDates.push({
                        date: formattedDate,
                        dayOfWeek: formattedDayOfWeek.split(' ')[1],
                    });
                }
                this.dateArr = weekDates
                this.getHalfHourlyTimePoints(0)
            },
            getHalfHourlyTimePoints(index) {
                let currentTime = new Date();
                const endOfDay = new Date(currentTime);
                if(index!=0){
                    endOfDay.setHours(20, 0, 0, 0);
                    currentTime = new Date(currentTime.setHours(8, 0, 0, 0))
                }else{
                    let passTime = new Date(new Date(currentTime).setHours(8, 0, 0, 0))
                    if(currentTime<passTime){
                        currentTime = new Date(currentTime.setHours(8, 0, 0, 0))
                    }
                    endOfDay.setHours(20, 30, 0, 0);
                }
                // 设置当天22:00的时间
                // 存储结果的数组
                const roundedHalfHourlyTimePoints = [];

                // 循环生成时间点，每隔30分钟
                while (currentTime <= endOfDay) {
                    // 获取分钟数并确保为30的倍数
                    const minutes = Math.floor(currentTime.getMinutes() / 30) * 30;
                    // 格式化小时和分钟，保证单个数字的小时和分钟前面加0
                    const formattedHour = currentTime.getHours().toString().padStart(2, '0');
                    const formattedMinute = minutes.toString().padStart(2, '0');

                    // 将时间点加入数组
                    roundedHalfHourlyTimePoints.push(`${formattedHour}:${formattedMinute}`);

                    // 增加30分钟
                    currentTime.setMinutes(currentTime.getMinutes() + 30);
                }
                roundedHalfHourlyTimePoints.splice(0,2)
                this.activeTime = roundedHalfHourlyTimePoints[0]
                this.timeArr =  roundedHalfHourlyTimePoints
            },
            dateFn(item,index){
                this.getHalfHourlyTimePoints(index)
                this.activeDate = item.date
            },
            dateFn(item,index){
                this.getHalfHourlyTimePoints(index)
                this.activeDate = item.date
            },
            timeFn(item){
                this.activeTime = item
            },
            saveTime(){
                let currentDate = new Date();
                let n = currentDate.getFullYear()
                this.delivery_time=n+'-'+this.activeDate+' '+this.activeTime
                this.showTime= false
            },
        },
        mounted(){},
        created() {
            let id = this.$route.query.id
            for(let i = 0; i < this.userArr.length; i++){
                if(id==this.userArr[i].id){
                    this.userObj = this.userArr[i]
                }
            }
            this.showCont = true
            this.getTime()
        },
    }
</script>

<style scoped lang="less">
.container {
    // padding-bottom: 1.25rem;
    box-sizing: border-box;
    background-color: #fff;  
    .headCont{
        background-color: #5cc78e;
        color: #fff;
        padding: 0.75rem 4% 1.25rem;
        box-sizing: border-box;
        .userItem{
            width: 100%;
            display: flex;
            padding: 0.75rem 0;
            align-items: center;
            .userImg{
                width: 4rem;
                height: 4rem;
                border-radius: 0.25rem;
                img{
                    width: 100%;
                    border-radius: 0.25rem;
                }
            }
            .userInfo{
                flex: 1;
                width: 1rem;
                margin-left: 0.75rem;
                .userHead{
                    height: 1rem;
                    display: flex;
                    align-items: center;
                    .userName{
                        font-weight: bold;
                        font-size: 0.8rem;
                    }
                    .orderTag{
                        padding: 0.15rem 0.5rem;
                        border-radius: 0.15rem;
                        background-color: #fff;
                        color: #5cc78e;
                        font-size: 0.6rem;
                        margin-left: 0.75rem;
                    }
                }
                .userTagDes{
                    display: flex;
                    align-items: center;
                    font-size: 0.6rem;
                    margin: 0.5rem 0;
                    .userdesItem{
                        margin-right: 0.75rem;
                    }
                }
                .userUnder{
                    display: flex;
                    justify-content: space-between;
                    font-size: 0.6rem;
                    margin-top: 0.25rem;
                    align-items: center;
                    .orderPrice{
                        .redText{
                            color: rgb(238, 80, 32);
                        }
                    }
                }
            }
        }
        .headDes{
            font-size: 0.6rem;
            .headDesItem{
                margin-bottom: 0.5rem;
                line-height: 1rem;
                width: 100%;
            }
            .hasOpen{
                word-break: break-all;
                overflow:hidden; 
                text-overflow:ellipsis; 
                display:-webkit-box;
                -webkit-box-orient:vertical;  
                -webkit-line-clamp:2; /* 超出几行省略 */
            }
            .openBtn{
                text-align: center;
                padding: 0.25rem 0;
                text-decoration: underline;
            }
        }
    }
    .orderCont{
        width: 100%;
        padding: 0.75rem 4% 1.25rem;
        box-sizing: border-box;
        background-color: #fff;
        position: relative;
        top: -1rem;
        border-radius: 0.75rem 0.75rem 0.25rem 0.25rem;
        .orderHead{
            text-align: center;
            font-size: 0.8rem;
            font-weight: bold;
            padding: 0.25rem 0;
        }
        .orderAddress{
            width: 100%;
            padding: 0.75rem 4%;
            box-sizing: border-box;
            border-radius: 0.25rem;
            border: 1px solid #5cc78e;
            background-color: #ebf9f3;
            color: #5cc78e;
            margin: 0.75rem 0;
            font-size: 0.6rem;
        }
        .delMask{
            width: 100%;
            border: 1px solid #5cc78e;
            background-color: #ebf9f3;
            padding: 0.75rem;
            border-radius: 0.25rem;
            box-sizing: border-box;
            .delTitle{
                font-weight: bold;
                margin-bottom: 0.75rem;
            }
            .dateCheck{
                width: 100%;
                overflow: auto;
                white-space: nowrap;
                margin-bottom: 1.25rem;
                .dateCheckItem{
                    width: 30%;
                    display: inline-block;
                    text-align: center;
                    border: 1px solid #5cc78e;
                    color: #5cc78e;
                    padding: 0.25rem 0;
                    margin-right: 0.75rem;
                    border-radius: 0.25rem;
                }
                .dateActive{
                    background-color: #5cc78e;
                    color: #fff;
                }
            }
            .dateCheck::-webkit-scrollbar {
                display: none; /* 针对WebKit浏览器，隐藏滚动条 */
            }
            
            .dateCheck {
                -ms-overflow-style: none; /* 针对IE和Edge，隐藏滚动条 */
            }
            
            .dateCheck:hover {
                overflow-x: hidden; /* 当鼠标悬停时隐藏横向滚动条 */
            }
            .timeCont{
                width: 100%;
                // justify-content: space-between;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                .timeItem{
                    width: 31%;
                    margin-bottom: 0.75rem;
                    margin-left: 3.5%;
                    font-size: 0.65rem;
                    .timeItemMain{
                        border: 1px solid #5cc78e;
                        box-sizing: border-box;
                        text-align: center;
                        border-radius: 0.25rem;
                        color: #5cc78e;
                        padding: 0.5rem;
                        width: 100%;
                    }
                    .activeTimeMain{
                        background-color: #5cc78e;
                        color: #fff;
                    }
                }
                .noLeft{
                    margin-left: 0;
                }
            }
        }
    }
    .orderBtn{
        width: 92%;
        margin: 0 auto;
        position: relative;
        top: -0.75rem;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        text-align: center;
        background-image: linear-gradient(to right, #8ee3be,#5cc78e);
        color: #fff;
        border-radius: 0.25rem;
    }
}
</style>